<template>
  <div class="panel-2" v-loading="loading">
    <div class="box1">
      <div class="title-text">警情描述</div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="案件情况" name="first" class="accident-panel">
        <div class="box2">
          <div class="box2_inner1">
            <!-- <img
              src="../../../../assets/images/accidentHandle/user.png"
              style="height: 140px; width: 130px; margin-top: 10px"
            /> -->
            <div class="level" :style="{ 'background-color':levelColor }">
              <div class="level-inner" :style="{'color':levelColor }">{{level}}</div>
            </div>
          </div>
          <div class="box2_inner2">
            <div style="display: flex">
              <el-tag type="danger">事发企业</el-tag>
              <div style="margin-top: 5px; margin-left: 5px; font-weight: bold">
                {{ accident.time }}
              </div>
            </div>
            <div style="margin-top: 5px">{{ accident.factoryName }}</div>
            <div style="margin-top: 5px">{{ accident.address }}</div>
            <el-tag type="danger" style="margin-top: 5px">报警人</el-tag>
            <div style="margin-top: 5px">
              {{ accident.name }}&nbsp;15262238081
            </div>
          </div>
        </div>
        <div class="box3">
          <img
            v-for="(item, index) in imgs"
            :key="index"
            :src="item"
            alt="暂无图片"
          />
        </div>
        <div class="box4">
          <el-tag type="success">详细情况</el-tag>
          <div style="font-size: 13px; margin-top: 5px">
            {{ accident.accidentDetail }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="现场反馈" name="second" class="accident-panel">
        <div style="font-weight: bold; font-size: 18px; margin-left: 10px;">厂区可燃气体浓度</div>
        <LineChart :key="detailKey"></LineChart>
        <div style="font-weight: bold; font-size: 18px; margin-left: 10px;">现场上传图片识别</div>
        <img src="../../../../assets/images/fire.png" class="detect-img">
      </el-tab-pane>
      <el-tab-pane label="应急预案" name="third" class="accident-panel">
        <div v-for="item in yuans" :key="item.id">
            <div class="title">{{item.name}}</div>
            <a :href="item.url"><el-button type="success">下载</el-button></a>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getLatestAccident, getImg,getContingencyPlan} from "@/api/accidenthandle/accident";
import LineChart from "./LineChart.vue";
import { Axis } from 'echarts';
import EditTable from '../../../tool/gen/editTable.vue';
var levels = [
  {name:"I",color:"#ff0000"},
  {name:"II",color:"#fff100"},
  {name:"III",color:"#ff8a00"},
  {name:"IV",color:"#01baff"}
];
export default {
  name: "AccidentPanel",
  components:{
    LineChart,
    EditTable,
  },
  data() {
    return {
      accident: {},
      imgs: [],
      loading: false,
      activeName: "first", //tab页切换保存变量
      levelColor:"#01baff",
      level:"IV 级",
      detailKey:0,//用于强制控制组件刷新
      yuans:[],
    };
  },
  methods: {
    handleClick(tab, event) {
      if(tab.name=="second"){
        // this.detailKey++;
      }
    },
    getData() {
      this.loading = true;
      getLatestAccident().then((res) => {
        if (res.code == 200) {
          this.accident = res.data;
          //加载图片
          getImg(res.data.id).then((res) => {
            if (res.code == 200) {
              var imgs = res.data;
              if (imgs.length > 3) {
                imgs = imgs.slice(0, 3);
              }
              this.imgs = imgs;
              this.loading = false;
            } else {
              this.$message.error("加载数据失败，请刷新");
            }
          });
        } else {
          // this.$message.error('加载数据失败，请刷新');
        }
      });
    },
    getYuAn(){
      // if(this.yuans.)
      getContingencyPlan().then((res)=>{
        if(res.code==200){
          this.yuans = res.data;
        }
      });
    }
  },
  mounted() {
    this.getData();
    this.getYuAn();
  },
};
</script>
<style scoped>
.panel-2 {
  width: 350px;
  height: 410px;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  background-color: #ffffff;
  /* opacity: 0.8; */
}
.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  height: 30px;
  /* border-bottom: #e5e6eb 1px solid; */
  /* margin-bottom: 5px; */
}
.title-text {
  font-weight: bold;
}
.box2 {
  display: flex;
  height: 140px;
  /* border-bottom: #e5e6eb 1px solid; */
}
.box2_inner2 {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 10px;
}
.box3 {
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
}
.box3 img {
  width: 110px;
  height: 110px;
}
.box4 {
  margin: 10px;
  font-size: 13px;
}
.accident-panel {
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto;
  height: 320px;
}
.level {
  height: 105px;
  width: 105px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.level-inner {
  border-radius: 50%;
  height: 80px;
  width: 80px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
  color: red;
  font-family:'Times New Roman';
}
.detect-img{
  width: 320px;
  height: 200px;
  margin-left: 10px;
  margin-top: 10px;
}
.box3 img {
  width: 110px;
  height: 110px;
}
.title{
  font-size: 20px;
  margin-bottom: 5px;
}
</style>